.box-container {
    margin: 30px;/* 外边距 */
    padding: 20px; /* 内边距 */
    border: 2px dashed #333; /* 边框 dashed：虚线*/
}

.box {
    width: 200px; 
    height: 100px;  
    padding: 20px; /* 内边距 */
    margin: 15px;
    border: 5px solid; /* 边框 solid:实线*/
    font-weight: bold; /* 加粗 */
    text-align: center; /* 文字居中 */
}

/*标准盒子*/
.standard-box {
    box-sizing: content-box; /* 标准盒子模型 */
    background-color: #e3f2fd;
    border-color: #2196f3;
}

/*IE盒子*/
.border-box {
    box-sizing: border-box; /* IE盒子模型 */
    background-color: #e8f5e9;
    border-color: #4caf50;
}

/*外边距*/
.margin-example {  
    background-color: #fff3e0;
    border-color: #ff9800;
    margin-top: 30px; 
    margin-bottom: 30px;
}

/*内边距*/
.padding-example {
    background-color: #fce4ec;
    border-color: #e91e63;
    padding: 40px 20px;
}

.box-label {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px; /* 距离顶部 */
}
   
.complete-box-model {
    margin: 40px auto;
    padding: 10px;
    max-width: 600px;
}

/* 外边距 - 采用明亮的黄色 */
.model-margin {
    background-color: #fff380; /* 明亮黄色 */
    padding: 30px;
    position: relative;
}

/* 边框 - 采用鲜艳的红色 */
.model-border {
    background-color: #ffcccc; /* 浅红色 */
    border: 5px solid #ff3333; /* 鲜红色边框 */
    padding: 20px;
}

/* 内边距 - 采用鲜明的蓝色 */
.model-padding {
    background-color: #cce5ff; /* 浅蓝色 */
    padding: 30px;
}

/* 内容区 - 采用深绿色 */
.model-content {
    background-color: #c6e0b4; /* 浅绿色 */
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-text {
    font-weight: bold;
    font-size: 24px;
    color: #2d6218; /* 深绿色文字 */
}

.model-label {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    padding: 0 5px;
}

